{% extends "public/base.html" %}
{% block main %}
<div class="admin-content">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf">
            <a href="{{url(nav[0]['url'])}}"><strong class="am-text-primary am-text-lg">{{nav[0]['title']}}</strong></a>
            {% if nav[1]['title'] is not empty %} /<a href="{{url(nav[1]['url'])}}" style="color:#333"><small>{{nav[1]['title']}}</small></a>{% endif %}
        </div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
            <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                    <a href="{{url('role/new')}}" class="am-btn am-btn-success"><span class="am-icon-plus"></span> 新增</a>
                </div>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
                <input type="text" class="am-form-field">
                <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button">搜索</button>
          </span>
            </div>
        </div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                        <tr>
                            <th class="table-check">
                                <input type="checkbox" />
                            </th>
                            <th class="table-id">ID</th>
                            <th class="table-title">角色标题</th>
                            <th class="table-status">角色状态</th>
                            <th class="table-type">角色描述</th>
                            <th class="table-set">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for role in page.items %}
                        <tr id="tr{{role.id}}">
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>{{role.id}}</td>
                            <td>{{role.title}}</td>
                            <td>{{role.status?'启用中':'禁用中'}}</td>
                            <td>{{role.description}}</td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a href="{{url('role/edit?id='~role.id)}}">
                                            <button type="button" class="am-btn am-btn-default  am-btn-xs am-text-primary">
                                                <span class="am-icon-pencil-square-o"></span> 编辑
                                            </button>
                                        </a>
                                        <a href="javascript:;" class="delete" data-id="{{role.id}}">
                                            <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only">
                                                <span class="am-icon-trash-o"></span> 删除
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="am-cf">
                    共{{ page.total_pages }}页、{{page.total_items}}条记录
                    <br> {% if page.total_pages > 1 %}
                    <div class="am-fr">
                        <ul class="am-pagination">
                            <li>
                                {{ link_to("role/index", 'First','class':'am-btn am-btn-xs') }}
                            </li>
                            <li {% if page.current==1 %}class="am-disabled" {% endif %}>
                                {{ link_to("role/index?page=" ~ page.before, 'Prev','class':'am-btn am-btn-xs') }}
                            </li>
                            <?php
                                $i=1;
                                while ($i <= $page->total_pages) {
                                    if ($page->current == $i) {
                                        echo '<li class="am-active"><a href="index?page='.$i.'" class="am-btn am-btn-xs">'.$i.'</a></li>';
                                    }else{
                                        echo '<li><a href="index?page='.$i.'" class="am-btn am-btn-xs">'.$i.'</a></li>';
                                    }
                                    $i++;
                                }
                            ?>
                            <li {% if page.current==page.total_pages %}class="am-disabled" {% endif %}>
                                {{ link_to("role/index?page=" ~ page.next, 'Next','class':'am-btn am-btn-xs') }}
                            </li>
                            <li>
                                {{ link_to("role/index?page=" ~ page.last, 'Last','class':'am-btn am-btn-xs') }}
                            </li>
                        </ul>
                    </div>
                    {% endif %}
                </div>
                <hr />
                <p>注：.....</p>
            </form>
        </div>
    </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">Amaze UI</div>
        <div class="am-modal-bd">
            {{user['user_name']}}，确定要删除这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
{% endblock %}
{% block javascript %}
<script language="javascript">
    $(document).ready(function() {
        var id;
        $('.delete').click(function() {
            id = $(this).attr('data-id');

            $('#delete-confirm').modal({
                relatedTarget: this,
                onConfirm: function(options) {
                    $.ajax({
                        url: '{{url("role/delete")}}',
                        type: 'POST',
                        dataType: 'JSON',
                        data: {
                            id: id
                        },
                    })
                    .done(function(data) {
                        if (data['id']) {
                            $('#tr' + data['id']).fadeOut('slow');
                        }
                    })
                    .fail(function() {
                        console.log('ajax传输失败');
                    });
                },
                onCancel: function() {}
            });
        });
    });
</script>
{% endblock %}


